Blog - LINE ENGINEERING

Azusa Tomita

LINE Engineer

flexboxの旧仕様、改定仕様、現行仕様の一覧
Azusa Tomita2013-09-09
LINE Engineer
[13/11/14 追記] flex-wrapの実装について注記を追加しました。暑さもやわらいできたような気配がしてきました。皆様いかがお過ごしでしょうか。久しぶりのブログ更新です。UIT 富田です。今回はCSSでのレイアウトをより柔軟にしてくれるflexboxについて解説します。 flexboxは大幅な仕様の変更が過去に2度もあり、各ブラウザとそのバージョンによって実装している仕様が異なるため、後方互換をきっちり対応しようとすると、gradientと並んで2大考えるのをやめたくなるプロパティとなっております。しかしflexboxを利用することで、現時点ではCSSだけでの対応が難しかったり、複数のプロパティを複雑に組み合わせる必要があるレイアウト（例えば一番大きい高さに揃えた要素を横に並べたり、子要素を上下左右中央位置したりといったもの）が、容易に利用できるようになるという大きなメリットもあり、使えるならば使っていきたいプロパティでもあります。にも関わらずflexboxについて調べてみると、各仕様をまとめた記事はみつかるものの、新旧の仕様を横断的に確認できるものが見つからなかっ
- frontend
compassのベンダープリフィックス制御
Azusa Tomita2012-12-02
LINE Engineer
歳晩の候、皆様におかれましてはますますのご繁栄の事とお喜び申し上げます。NHN Japan ウェブサービス本部開発1室UITチーム(長い) 富田(@a_t)です。 CSS Preprocessor Advent Calendar 2012の3日目、css書くのに便利だからといって盲目的にcompass使ってないでちょっとは中でなにをしているか知っておいてもよかろうもんということでタイトルのとおり、compassがベンダープリフィックスの制御をどのように行なっているかについて書きます。compassのソースをまだ一度も見たことがない人向けの内容です。 sassについてよくしらない、というかたは過去の記事をよむとわかるかもしれません。 CSS3関連のmixinはなにをしてるか compassのCSS3関連のミックスインは、引数に値を渡してあげるだけで、しちめんどくさいベンダープリフィックスを自動で出力してくれる大変霊験あらたかな機能です。使っているだけでは中で何をしているかはわかりませんが、compassは公式サイトからsourceの中身を見ることができます。そこからベンダープリフィッ
- frontend
sassの抑えておきたいfunctionの使い方
Azusa Tomita2011-12-05
LINE Engineer
こんにちは。年末の予定はぶっ通しでスカイリムにつぎ込むことが決定したUIT富田です。今回は、Less & Sass Advent calendar 2011の6日目として、sassのfunctionについて解説します。すっぽりハマった四則演算の落とし穴 sassは値の四則演算をサポートしており、10進数だけでなく、16進数の値であってもよしなに計算してくれます。 color: #a3a4a5 + #111111; ↓ color: #b4b5b6; 16進数と10進数でもエラーにならず計算してくれます。（普通あまりやらないとは思いますが） color1: #000000 + 1; color2: #000000 + 15; ↓ color1: #010101; color2: #0f0f0f; この16進数の計算は、結果が#fffffを上回った場合、上回った分は切り捨てて、すべて#ffffffとして計算します color: #999 + #fff; ↓ color: #ffffff; 上記の例では、切り捨ててくれてありがとう、という感じですが、

1